<!--
 * @description: 功能菜单
 * @fileName: Toolbar.vue
 * @author: ssr
 * @date: 2023-01-05 15:06:11
 * @version: V1.0.0
! -->
<script setup lang="ts">
import { useScenarioStore } from "@/pinia/stores/scenario"
import { FormTypeEnum, MeasuringType } from "@@/constants/other-keys"
import {
  ArrowDown,
  Compass,
  Document,
  List,
  Menu as MenuIcon,
  Setting
} from "@element-plus/icons-vue"
import { computed, ref } from "vue"
import CreateOrUpdate from "../../components/create-or-update.vue"
import SimDialog from "./dilog.vue"
import EnvironmentDialog from "./EnvironmentDialog.vue"


interface Props {
  scnName: string | undefined
}

defineProps<Props>()

// 获取状态
const scenarioStore = useScenarioStore()

// 引用
const EnvironmentDialogRef = ref()
const dialogVisible = ref(false)
const dialogVisibleBase = ref(false)

// 已选实体面板显示控制
const selectedListShow = computed(() => {
  return scenarioStore.selectedListShow
})

// 实体列表面板显示控制
const entityListShow = computed(() => {
  return scenarioStore.entityListShow
})

// 控制对象面板显示控制
const controlObjShow = computed(() => {
  return scenarioStore.controlObjShow
})

/**
 * 打开sim文件对话框
 */
function simFile() {
  dialogVisible.value = true
}

/**
 * 打开环境设置对话框
 */
function handleEnvSetting() {
  EnvironmentDialogRef.value.handleShowDialog()
}

/**
 * 切换已选实体面板显示状态
 */
function handleSelectedList() {
  scenarioStore.setSelectedListShow(!scenarioStore.selectedListShow)
}

/**
 * 切换实体列表面板显示状态
 */
function handleEntityList() {
  scenarioStore.setEntityListShow(!scenarioStore.entityListShow)
}

/**
 * 切换控制对象面板显示状态
 */
function handleControlObjs() {
  scenarioStore.setControlObjShow(!scenarioStore.controlObjShow)
}

/**
 * 处理工具点击事件
 */
function handleToolClick(command: string) {
  scenarioStore.measuringTool?.measuring(command)
}

function handleView() {
  dialogVisibleBase.value = true
}

function handleCloseBase() {
  dialogVisibleBase.value = false
}
</script>

<template>
  <div class="edit-scenario-toolbar">
    <el-space class="title" alignment="center">
      <span :title="scnName" class="title-text">{{ scnName }}</span>
      <el-tooltip effect="dark" content="想定信息" placement="bottom">
        <el-link :underline="false">
          <SvgIcon name="info" class="project-info-btn" @click="handleView" />
        </el-link>
      </el-tooltip>
    </el-space>
    <div class="toolbar-actions">
      <el-dropdown @command="handleToolClick" trigger="click">
        <el-button class="tool-button">
          工具
          <el-icon class="el-icon--right">
            <ArrowDown />
          </el-icon>
        </el-button>

        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item :command="MeasuringType.POSITION">
              获取点坐标
            </el-dropdown-item>
            <el-dropdown-item :command="MeasuringType.DISTANCE">
              测量线段
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>

      <el-button @click="simFile">
        <el-icon class="button-icon">
          <Document />
        </el-icon>
        sim文件
      </el-button>

      <el-button @click="handleEnvSetting">
        <el-icon class="button-icon">
          <Setting />
        </el-icon>
        环境设置
      </el-button>

      <el-button
        :type="selectedListShow ? 'primary' : 'default'"
        @click="handleSelectedList"
      >
        <el-icon class="button-icon">
          <List />
        </el-icon>
        已选实体
      </el-button>

      <el-button
        :type="entityListShow ? 'primary' : 'default'"
        @click="handleEntityList"
      >
        <el-icon class="button-icon">
          <MenuIcon />
        </el-icon>
        实体列表
      </el-button>

      <el-button
        :type="controlObjShow ? 'primary' : 'default'"
        @click="handleControlObjs"
      >
        <el-icon class="button-icon">
          <Compass />
        </el-icon>
        控制对象
      </el-button>
    </div>
    <EnvironmentDialog ref="EnvironmentDialogRef" />
    <SimDialog
      v-model:dialog-visible="dialogVisible"
    />
    <CreateOrUpdate :id="(scenarioStore.scnId as string)" :dialog-type="FormTypeEnum.VIEW" :visible="dialogVisibleBase" @close-dialog="handleCloseBase" />
  </div>
</template>

<style lang="scss" scoped>
@import "@@/assets/styles/mixins.scss";

.edit-scenario-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--el-border-color-light);
  padding: 0 var(--main-padding);
  height: 50px;
  line-height: 50px;

  .title {
    font-size: 16px;
    font-weight: 500;
  }

  .title-text {
    max-width: 200px;
    @extend %ellipsis;
  }

  .toolbar-actions {
    display: flex;
    gap: 8px;

    .button-icon {
      margin-right: 4px;
    }
  }
}
</style>
